import * as React from 'react';
import {Text, View, StyleSheet, Image, TextInput,TouchableOpacity, ScrollView,StatusBar,Switch,PixelRatio,
    Dimensions,NetInfo
} from 'react-native';
import IrishChainMiddleItem from "./IrishChainMiddleItem"
var picArr =['http://jxjy.neusoft.edu.cn/Upload/image/d7cf09d0ca3ff37ba33a3be88dc569b2.jpg',
    'http://jxjy.neusoft.edu.cn/Upload/image/dd8657e17d0c7934a9b0f3a08b3b8889.jpg',
    'http://jxjy.neusoft.edu.cn/Upload/image/d0bb1616c879c905a9b866128a20b8c3.jpg',
    'http://jxjy.neusoft.edu.cn/Upload/image/e8d642f7baae4eeee4b9fdabe3e45483.jpg']
var Wwidth = Dimensions.get('window').width
export default class Home extends React.Component {
    constructor(props){
        super(props)
        this.state ={
            inputText:'123',
            switchStatus:true,
            currentPage:'0',//用于轮播
            title:"11111"
        }
    }
    //复杂操作
    componentDidMount() {
        //开启定时器
        this._startTimer();
    }
    componentWillUnmount() {
        // 如果存在this.timer，则使用clearTimeout清空。
        // 如果你使用多个timer，那么用多个变量，或者用个数组来保存引用，然后逐个clear
        this.timer && clearTimeout(this.timer);
    }
    _startTimer()
    {
        let scrollView = this.refs.scrollView;
        this.timer = setInterval(
            ()=>{
                let imageCount = picArr.length;
                //4.1 设置圆点
                let activePage = 0;
                //4.2判断
                if(this.state.currentPage>=imageCount+1){
                    activePage = 0;
                }else{
                    activePage = this.state.currentPage+1;
                }
                //4.3 更新状态机
                this.setState({currentPage:activePage});
                //4.4 让scrollview 滚动起来
                let offsetX = activePage * 420;
                this._scrollView.scrollTo({x:offsetX,y:0,animated:true});
            },
            3000
        );
    }
    // _startFetch(){
    //     fetch("http://10.0.2.2:3000/")
    //         .then((response) => response.json())
    //         .then((data1) => {
    //             this.setState({
    //                 title: data1.data.title
    //             })
    //         })
    //         .catch()
    // }
    render() {
        return (
            <View style={styles.container}>
                {this._renderHeader()}
                <View>
                    <ScrollView
                        horizontal = {true}
                        showsHorizontalScrollIndicator = {true}
                        pagingEnabled = {true}
                        onMomentumScrollEnd = {this.onAnimationEnd.bind(this)}
                        ref={ (component) => {this._scrollView = component} }
                    >
                        {this.renderScrollItem()}
                    </ScrollView>
                    {/*返回指示器*/}
                    <View style={styles.pageViewStyle}>
                        {/*返回圆点*/}
                        {this.renderPageCicle() }
                    </View>
                </View>
                <View>
                   <IrishChainMiddleItem />
                </View>
                <View>
                    <TouchableOpacity onPress={()=>{
                        alert(PixelRatio.get())
                        //alert(Wwidth)
                        // NetInfo.fetch().done(
                        //     (canshu)=>{alert(canshu)}
                        // )
                    }}>
                    <Text>StatusBar Switch</Text>
                    </TouchableOpacity>
                    <Switch
                        value ={this.state.switchStatus}
                        onValueChange = {(value) =>{
                            this.setState({switchStatus:value})
                        }}
                    />
                </View>
            </View>
        );
    }
    textChange(params){
        //需要把inputText状态重新赋值：把输入的内容赋值
        this.setState({
            inputText:params
        })
        // alert(params)
    }
    renderScrollItem(){
        var itemArr = []// 定义空的组件数组，里面一会放图片
        //建立照片数组，和原生drawable下的文件夹里照片名对应
        //对picArr数组遍历，将里面内容放到itemArr里
        for (var i = 0; i < picArr.length; i++) {
            itemArr.push(
                <Image key={i} source={{uri:picArr[i]}} style={{width:420,height:190}}/>
            )
        }
        return itemArr;
    }
    renderPageCicle(){
        var indicatorArr=[];
        //拿到图像数组
        var style ;
        for(var i=0;i<picArr.length;i++){
            //判断
            style=(i==this.state.currentPage)? {color:'orange'}:{color:'#ffffff'};
            indicatorArr.push(
                <Text  key={i} style={[styles.fontSizeStyle,style]}>&bull;</Text>
            );
        }
        return indicatorArr;
    }
    //手动滑动分页实现
    onAnimationEnd(e){
        //求出水平方向的偏移量
        var offSetX=e.nativeEvent.contentOffset.x;
        //求出当前的页数
        var currentPage=Math.floor(offSetX/420);
        //更新状态机，重新绘制UI
        this.setState({
            currentPage:currentPage
        });
    }
    _renderHeader(){
        return(
            <View style={styles.navstyle}>
                <StatusBar
                    hidden ={false}
                    animated = {true}
                    backgroundColor ={"#FF3C25"}
                />
                <Image source={require('../../assets/scan.png')}/>
                <TextInput
                    placeholder={'这里是输入框'}
                    placeholderTextColor={'#CCC'}
                    style={styles.inputStyle}
                    onChangeText={this.textChange.bind(this)}
                />
                <TouchableOpacity onPress ={()=>{alert(this.state.inputText)}}>
                <Text style={styles.forFontStyle} >搜索</Text>
                </TouchableOpacity>
            </View>

        )
    }
}
const styles = StyleSheet.create({
    pageViewStyle:{
        width:420,
        height:25,
        backgroundColor:'rgba(0,0,0,0.6)',
        //定位
        position:'absolute',
        bottom:0,
        flexDirection:'row',
        alignItems:'center',
    },
    fontSizeStyle:{
        fontSize:25,
    },
    forFontStyle: {
        color: '#FFF',
        fontWeight: '900',
        fontSize: 15
        //白色字，字体加粗，字号20
    },
    inputStyle: {
        height: 40, backgroundColor: "#FFF",
        width: 300, borderRadius: 10
    },
    navstyle: {
        height: 60, backgroundColor: '#FF3C25',
        flexDirection: 'row', justifyContent: 'space-between',
        alignItems: 'center', padding: 5,
    },
    container: {
        flex: 1,
    },
});
module.exports =Home;
